<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>买家订单</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>



    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }
        .Buyer-order .bd-1 ul li .title{
        		padding-right:0.22rem;
        }
        .Buyer-order .bd-1 ul li .title:after{
        		background:url('../img/delete_shops.png') no-repeat center center;
        }
        .Buyer-order .bd-1 ul li .title{
        		padding-right:0.22rem;
        }
        .Buyer-order .bd-1 ul li .title:after{
        		background:url('../img/delete_shops.png') no-repeat center center;
        }
    </style>
</head>

<body>


    <!--正文-->
    <div class="Buyer-order">
        <div class="hd flex">
            <a href="javascript:;">未付款</a>
            <a href="javascript:;">待发货</a>
            <a href="javascript:;">未收货</a>
            <a href="javascript:;">待评价</a>
            <a href="javascript:;" class="">售后</a>


        </div>
        <div class="bd">
            <div class="bd-1 bd-0 ">
                <ul>
                    <li v-for='item in Unpaid.ps' style="margin-bottom:.08rem;" @click='console(Unpaid)'>
                        <div class="title flex">
                            <img :src="item.store_image" alt="">
                            <span>{{item.store_name}}</span>
                            <em></em>
                            <i>未付款</i>
                        </div>
                        <div class="content clearfix">
                            <section v-for='items in item.produce' class="clearfix produce" style="margin-bottom:.08rem;">
                                <img :src="items.produceHeadImage" alt="">
                                <div>
                                    {{items.produceDescribe}}
                                </div>
                            </section>

                            <p class="tip">
                                <span>共<font class="num">1</font>件商品 合计:</span>
                                <em>￥ <font class="price"></font></em>
                                <i>（含运费￥0.00）</i>
                            </p>
                        </div>

                        <p class="bottom flex">
                            <span>立即付款</span>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="bd-2 bd-0">
                <ul>
                    <li v-for='item in Sold_for_sale.ps' style="margin-bottom:.08rem;">
                        <div class="title flex">
                            <img :src="item.store_image" alt="">
                            <span>{{item.store_name}}</span>
                            <em></em>
                            <i>待发货</i>
                        </div>
                        <div class="content clearfix">
                            <section v-for='items in item.produce' class="clearfix produce" style="margin-bottom:.08rem;">
                                <img :src="items.produceHeadImage" alt="">
                                <div>
                                    {{items.produceDescribe}}
                                </div>
                            </section>

                            <p class="tip">
                                <span>共<font class="num">1</font>件商品 合计:</span>
                                <em>￥ <font class="price"></font></em>
                                <i>（含运费￥0.00）</i>
                            </p>
                        </div>

                        <p class="bottom flex">
                            <span @click='Remind_Ship(this)'>提醒卖家</span>

                        </p>
                    </li>
                </ul>
            </div>
            <div class="bd-3 bd-0">
                <ul>
                    <li v-for='item in To_be_received.ps' style="margin-bottom:.08rem;">
                        <div class="title flex">
                            <img :src="item.store_image" alt="">
                            <span>{{item.store_name}}</span>
                            <em></em>
                            <i>未收货</i>
                        </div>
                        <div class="content clearfix">
                            <section v-for='items in item.produce' class="clearfix produce" style="margin-bottom:.08rem;">
                                <img :src="items.produceHeadImage" alt="">
                                <div>
                                    {{items.produceDescribe}}
                                </div>
                            </section>

                            <p class="tip">
                                <span>共<font class="num">1</font>件商品 合计:</span>
                                <em>￥ <font class="price"></font></em>
                                <i>（含运费￥0.00）</i>
                            </p>
                        </div>

                        <p class="bottom flex">
                            <span @click='go_Logistics(this)'>查看物流</span>
                            <span>确认收货</span>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="bd-4 bd-0">
                <ul>
                    <li v-for='item in Be_evaluated.ps' style="margin-bottom:.08rem;">
                        <div class="title flex">
                            <img :src="item.store_image" alt="">
                            <span>{{item.store_name}}</span>
                            <em></em>
                            <i>待评价</i>
                        </div>
                        <div class="content clearfix">
                            <section v-for='items in item.produce' class="clearfix produce" style="margin-bottom:.08rem;">
                                <img :src="items.produceHeadImage" alt="">
                                <div>
                                    {{items.produceDescribe}}
                                </div>
                            </section>

                            <p class="tip">
                                <span>共<font class="num">1</font>件商品 合计:</span>
                                <em>￥ <font class="price"></font></em>
                                <i>（含运费￥0.00）</i>
                            </p>
                        </div>

                        <p class="bottom flex">
                            <span @click='go_Evaluation(this)'>立即评价</span>
                            <span onclick="javascript:window.location.href='../page/After-sales-application.html'"> 申请售后</span>
                        </p>
                    </li>
                </ul>
            </div>

            <div class="bd-5 bd-0">
                <ul>
                    <li v-for='item in After_sale.ps' style="margin-bottom:.08rem;">
                        <div class="title flex">
                            <img :src="item.store_image" alt="">
                            <span>{{item.store_name}}</span>
                            <em></em>
                            <i>售后</i>
                        </div>
                        <div class="content clearfix">
                            <section v-for='items in item.produce' class="clearfix produce" style="margin-bottom:.08rem;">
                                <img :src="items.produceHeadImage" alt="">
                                <div>
                                    {{items.produceDescribe}}
                                </div>
                            </section>

                            <p class="tip">
                                <span>共<font class="num">1</font>件商品 合计:</span>
                                <em>￥ <font class="price"></font></em>
                                <i>（含运费￥0.00）</i>
                            </p>
                        </div>

                        <p class="bottom flex">
                            <span onclick="javascript:window.location.href='../page/Return-schedule.html'">查看进度</span>
                        </p>
                    </li>
                </ul>
            </div>


        </div>




    </div>
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>
    <script>
        $(function () {
            $('.hd a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            })
            let num = getQueryString('num');
            $('.hd a').eq(num).addClass('active');
            $('.bd-0').eq(num).addClass('active');
        })
    </script>
    <script>
        $(function () {
            new Vue({
                el: 'body',
                data: {
              
                },
                ready: function () {
                		$('.bc-gray').css('background','#fff')
                    this.$http.get(base_url + 'ZITAOHUI/user/order', {
                            params: {
                                userId: u_id
                            }
                        })
                        .then(function (response) {
                            let all_data = response.data.extend.list;
                            console.log(all_data)
                            var type;
                            for (let i = 0; i < all_data.length; i++) {
                                type = all_data[i].order_Msg;
                                if (type == '售后') {
                                    this.$set('After_sale', all_data[i])
                                    setTimeout(function () {
                                        calc_num(5, i)
                                    }, 100);
                                } else if (type == '待发货') {
                                    this.$set('Sold_for_sale', all_data[i])
                                    setTimeout(function () {
                                        calc_num(2, i)
                                    }, 100);
                                } else if (type == '待收货') {
                                    this.$set('To_be_received', all_data[i])
                                    setTimeout(function () {
                                        calc_num(3, i)
                                    }, 100);
                                } else if (type == '待评价') {
                                    this.$set('Be_evaluated', all_data[i])
                                    setTimeout(function () {
                                        calc_num(4, i)
                                    }, 100);
                                } else if (type == '未付款') {
                                    this.$set('Unpaid', all_data[i])
                                    setTimeout(function () {
                                        calc_num(1, i)
                                    }, 100);
                                }
                            }
                            console.log(this.After_sale)
                            console.log(all_data)

                        
                            function calc_num(tab, aim) {
                                let _li = document.querySelectorAll('.bd-' + tab + ' ul li');
                                let ps = all_data[aim].ps;
                                for (let j = 0; j < ps.length; j++) {
                             
                                    let price = 0,
                                        produce = ps[j].produce,
                                        
                                        num = produce.length;
                                    for (let k = 0; k < num; k++) {
                                        price += produce[k].producePrice;
                                    }
                                    _li[j].getElementsByClassName('num')[0].innerHTML = num;
                                    _li[j].getElementsByClassName('price')[0].innerHTML = price;
                                }

                            }



                        }, function () {

                        })
                },
                methods: {
                    console: function (t) {
                        console.log(t)
                    },
            
                    Remind_Ship: function (t) {
              
                        let order_id = t.item.order_id;
                        $.ajax({
                            url: base_url + 'ZITAOHUI/remindsellers',
                            data: {
                                order_id: order_id,
                            },
                            success: (data) => {
                                console.log(data)
                                alert(data.extend.list)
                            },
                            error: function () {
                                console.error('提醒卖家接口出错')
                            }
                        })
                    },
          
                    go_Evaluation: (t) => {
                        console.log(t)
                        window.location.href = '../page/Make-an-evaluation.html?order_id=' + t.item.order_id;
                        let tt = {
                            img:t.item.produce[0].produceHeadImage,
                            des:t.item.produce[0].produceDescribe
                        }
                        window.sessionStorage.setItem('produce_info', JSON.stringify(tt))
                    },
      
                    go_Logistics:(t)=>{
                        window.location.href = '../page/View-Logistics.html?order_id=' + t.item.order_id;
                    }
                }
            })
        })
    </script>
</body>

</html>